<template>
    <div class="leave-apply">
        <apply-header process-name="出差流程审批" @cancel-click="cancelClick" @submit-click="submit"/>
        <div class="apply-content">
            <el-form :model="proInst" label-position="left" label-width="130px" label-suffix="：">
                <form-title title="出差申请审批"/>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请人">
                            {{proInst.startUser}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出差天数">
                            {{proInst.variables.num}}天
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开始时间">
                            {{new Date(proInst.variables.beginDate).format('yyyy-MM-dd hh:mm:ss')}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间">
                            {{new Date(proInst.variables.endDate).format('yyyy-MM-dd hh:mm:ss')}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出差原由">
                            {{proInst.variables.description}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请时间">
                            {{proInst.createTime}}
                        </el-form-item>
                    </el-col>
                </el-row>
<!--                createTime: "2022-05-30 22:29:29"-->
<!--                endTime: null-->
<!--                isEnd: null-->
<!--                isSuspend: null-->
<!--                proNode: null-->
<!--                proNodeList: null-->
<!--                processDefinitionName: null-->
<!--                processInstanceId: "ea4a8701-e024-11ec-a1c7-00ff37603673"-->
<!--                startUser: "王思龙"-->
<!--                startUserId: "11"-->
<!--                variables: {beginDate: '2022-05-04T16:00:00.000+00:00', manager: '11', endDate: '2022-05-06T16:00:00.000+00:00', gm: '3', num: 3, …}-->
<!--                [[Prototype]]: Object-->
<!--                msg: null-->
<!--                [[Prototype]]: Object-->
            </el-form>
            <el-form :model="auditResult" :rules="rule" label-suffix="：" label-width="100px" label-position="left" ref="formRef">
                <el-form-item label="任务编号" prop="taskId" style="display: none">
                    <el-input v-model="auditResult.taskId"/>
                </el-form-item>
                <el-form-item label="审批结果" prop="approved">
                    <el-radio-group v-model="auditResult.approved">
                        <el-radio :label="true" border>通过</el-radio>
                        <el-radio :label="false" border>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="回复" prop="reply" v-show="auditResult.approved===false">
                    <el-input v-model="auditResult.reply" type="textarea" :rows="2" placeholder="请输入回复内容"/>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import ApplyHeader from "../../../com/apply/ApplyHeader.vue";
import FormTitle from "../../../com/apply/FormTitle.vue";
import {auditEvection, queryEvectionAccreditationDetail} from "../../../../network/process/evection-process";
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElLoading, ElMessage} from "element-plus";

export default {
    name: "EvectionAccreditation",
    components: {FormTitle, ApplyHeader},
    setup(props,{emit}){
        const formRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const validateReply = (rule,value,callback)=>{
            if((!form.auditResult.approved) && (value === null || value === '')){
                callback(new Error('请输入回复内容！'));
            }
            callback();
        }
        const form = reactive({
            auditResult: {
                taskId: null,
                approved: null,
                reply: null,
            },
            rule: {
                taskId: [
                    {required: true,message: '请选择任务编号',trigger: 'blur'}
                ],
                approved: [
                    {required: true,message: '请选择审批结果',trigger: 'blur'}
                ],
                reply: [
                    {validator: validateReply,trigger: 'blur'},
                ]
            },
            submit(){
                formRef.value.validate((valid)=>{
                    if(valid){
                        // console.log('审批通过form：',form.auditResult);
                        let loading = ElLoading.service({
                            text: '正在提交审批结果...',
                            lock: true
                        })
                        auditEvection(form.auditResult).then(vo=>{
                            loading.close();
                            globalProperties.$response.handle({
                                data: vo,
                                success: '处理成功',
                                successFn: ()=>{
                                    let returnUrl = globalProperties.$route.query.returnUrl;
                                    globalProperties.$router.push(returnUrl);
                                },
                                error: '处理失败'
                            })
                        })
                    }else{
                        ElMessage.error('请先完善审批内容')
                    }
                })
            },
            resetForm(){
                formRef.value.clearValidate();
                formRef.value.resetFields();
            }
        })

        return {
            formRef,
            ...toRefs(form)
        }
    },
    data(){
        return {
            proInst: null,
        }
    },
    methods:{
        cancelClick(){
            let returnUrl = this.$route.query.returnUrl;
            this.$router.push(returnUrl)
        },
        loadTaskDetail(){
            let taskId = this.$route.query.taskId;
            this.auditResult.taskId = taskId;
            queryEvectionAccreditationDetail(taskId).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.proInst = vo.data;
                    },
                    log: '任务详情'
                })
            })
        }
    },
    created() {
        console.log('dd')
        this.loadTaskDetail();
    },
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.leave-apply{

}
.apply-content{
    margin: 0 auto;
    width: 1240px;
    box-shadow: 0 0 2px 1px lightgrey;
    background: rgb(252,252,252);
    padding: 10px 20px;
    box-sizing: border-box;
}
</style>